<template>
	<view class="container">
		<view class="header">
			<view class="title">分享有礼</view>
		</view>
		
		<view class="banner-section">
			<image class="banner-image" src="/static/user-img.jpg" mode="aspectFill"></image>
		</view>
		
		<view class="reward-section">
			<view class="section-title">您的奖励</view>
			<view class="reward-cards">
				<view class="reward-card">
					<view class="reward-amount">68</view>
					<view class="reward-unit">积分</view>
					<view class="reward-desc">当前可用</view>
				</view>
				<view class="reward-card">
					<view class="reward-amount">¥10</view>
					<view class="reward-unit">元</view>
					<view class="reward-desc">可提现金额</view>
				</view>
				<view class="reward-card">
					<view class="reward-amount">5</view>
					<view class="reward-unit">人</view>
					<view class="reward-desc">已邀请好友</view>
				</view>
			</view>
		</view>
		
		<view class="rule-section">
			<view class="section-title">活动规则</view>
			<view class="rule-list">
				<view class="rule-item">
					<view class="rule-num">1</view>
					<view class="rule-text">邀请好友注册并完成实名认证，您将获得20积分奖励</view>
				</view>
				<view class="rule-item">
					<view class="rule-num">2</view>
					<view class="rule-text">好友首次消费，您将获得订单金额的5%返现（最高50元）</view>
				</view>
				<view class="rule-item">
					<view class="rule-num">3</view>
					<view class="rule-text">邀请满3位好友，额外奖励10元现金红包</view>
				</view>
				<view class="rule-item">
					<view class="rule-num">4</view>
					<view class="rule-text">邀请满10位好友，额外奖励30元现金红包</view>
				</view>
				<view class="rule-item">
					<view class="rule-num">5</view>
					<view class="rule-text">活动期间邀请好友数量排名前10名，额外奖励100元现金红包</view>
				</view>
			</view>
		</view>
		
		<view class="record-section">
			<view class="section-title">邀请记录</view>
			<view class="record-list">
				<view class="record-item">
					<view class="record-avatar">
						<image src="/static/user-img.jpg" mode="aspectFill"></image>
					</view>
					<view class="record-info">
						<view class="record-name">用户1355****8899</view>
						<view class="record-time">2023-03-15 10:30</view>
					</view>
					<view class="record-status success">已注册</view>
				</view>
				
				<view class="record-item">
					<view class="record-avatar">
						<image src="/static/user-img.jpg" mode="aspectFill"></image>
					</view>
					<view class="record-info">
						<view class="record-name">用户1866****3344</view>
						<view class="record-time">2023-03-12 15:45</view>
					</view>
					<view class="record-status success">已消费</view>
				</view>
				
				<view class="record-item">
					<view class="record-avatar">
						<image src="/static/user-img.jpg" mode="aspectFill"></image>
					</view>
					<view class="record-info">
						<view class="record-name">用户1377****6655</view>
						<view class="record-time">2023-03-10 09:22</view>
					</view>
					<view class="record-status">待注册</view>
				</view>
			</view>
		</view>
		
		<view class="action-btn">
			<button class="share-btn">
				<up-icon name="share" size="24" color="#ffffff"></up-icon>
				<text>立即分享</text>
			</button>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f8f9fc;
	padding-bottom: 40rpx;
}

.header {
	padding: 30rpx;
	background-color: #ffffff;
}

.title {
	font-size: 36rpx;
	font-weight: 600;
	color: #303133;
}

.banner-section {
	margin-top: 20rpx;
	padding: 0 30rpx;
}

.banner-image {
	width: 100%;
	height: 300rpx;
	border-radius: 16rpx;
}

.reward-section {
	margin-top: 30rpx;
	padding: 30rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
}

.section-title {
	font-size: 30rpx;
	color: #303133;
	font-weight: 600;
	margin-bottom: 20rpx;
}

.reward-cards {
	display: flex;
	justify-content: space-between;
}

.reward-card {
	width: 30%;
	background: linear-gradient(135deg, #ff6b6b, #fa3534);
	border-radius: 16rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #ffffff;
	
	&:nth-child(2) {
		background: linear-gradient(135deg, #4393ff, #2979ff);
	}
	
	&:nth-child(3) {
		background: linear-gradient(135deg, #ffb347, #ff9900);
	}
}

.reward-amount {
	font-size: 40rpx;
	font-weight: 600;
	margin-bottom: 4rpx;
}

.reward-unit {
	font-size: 24rpx;
	margin-bottom: 10rpx;
}

.reward-desc {
	font-size: 22rpx;
	opacity: 0.8;
}

.rule-section {
	margin-top: 30rpx;
	padding: 30rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
}

.rule-list {
	margin-top: 20rpx;
}

.rule-item {
	display: flex;
	margin-bottom: 20rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.rule-num {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background-color: #fa3534;
	color: #ffffff;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.rule-text {
	font-size: 28rpx;
	color: #606266;
	line-height: 1.5;
}

.record-section {
	margin-top: 30rpx;
	padding: 30rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
}

.record-list {
	margin-top: 20rpx;
}

.record-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f2f5f9;
	
	&:last-child {
		border-bottom: none;
	}
}

.record-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 20rpx;
	
	image {
		width: 100%;
		height: 100%;
	}
}

.record-info {
	flex: 1;
}

.record-name {
	font-size: 28rpx;
	color: #303133;
	margin-bottom: 6rpx;
}

.record-time {
	font-size: 24rpx;
	color: #909399;
}

.record-status {
	font-size: 26rpx;
	color: #909399;
	
	&.success {
		color: #19be6b;
	}
}

.action-btn {
	margin-top: 40rpx;
	padding: 0 30rpx;
}

.share-btn {
	background: linear-gradient(135deg, #ff6b6b, #fa3534);
	color: #ffffff;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 0;
	font-size: 32rpx;
	font-weight: 500;
	
	text {
		margin-left: 10rpx;
	}
}
</style> 